<style scoped>
</style>

<template>
  <div>
    <Modal v-model="IsModalShow" title="绑定" :mask-closable="false" @on-cancel="cancel" width="1000">
      <div class="split">
        <Split :value="0.5">
          <div slot="left" class="split-pane-left">
            <Tag
              v-for="item in deviceList"
              :key="item.devId"
              :name="item.devName"
              color="warning"
              type="dot"
            >{{item.imei}}</Tag>
          </div>
          <div slot="right" class="split-pane-right">
            <Form
              ref="bindForm"
              :model="bindForm"
              :label-width="80"
              value="true"
              style="padding: 3px 10px"
            >
              <Form-item
                label="所属部门"
                prop="cascader"
                :rules="{required: true, message: '必选', trigger:'change', type:'array'}"
              >
                <Cascader
                  :data="deptCascader"
                  v-model="bindForm.cascader"
                  :filterable="true"
                  @on-change="onChangeCascader"
                  transfer
                  placeholder="选择部门"
                ></Cascader>
              </Form-item>
              <Form-item
                label="所属商铺"
                prop="shopId"
                :rules="{required: true, message: '必选', trigger:'change', type:'number'}"
              >
                <Select v-model="bindForm.shopId">
                  <Option
                    v-for="item in shopList"
                    :value="item.value"
                    :key="item.value"
                  >{{ item.label }}</Option>
                </Select>
              </Form-item>
            </Form>
          </div>
        </Split>
      </div>

      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
        <Button type="primary" :loading="loading" @click="saveForm('bindForm')">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getShopSelections, bindShop } from "@/api/asset";
import { getDeptCascader } from "@/api/system";
export default {
  props: {
    parentDeviceList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      IsModalShow: false,
      deviceList: [],
      loading: false,
      deptCascader: [],
      bindForm: {
        cascader: [],
        shopId: ""
      },
      deptId: 0,
      shopList: []
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      if (curVal) {
        this.deviceList = JSON.parse(JSON.stringify(this.parentDeviceList));
      }
      this.IsModalShow = curVal;
    }
  },
  created() {
    this.getDeptCascader();
  },
  mounted() {},
  methods: {
    async getDeptCascader() {
      let res = await getDeptCascader();
      if (res.code == 0) {
        this.deptCascader = res.data;
      }
    },
    onChangeCascader(valueArr) {
      if (valueArr.length > 0) {
        this.deptId = valueArr[valueArr.length - 1];
        this.bindForm.shopId = "";
        this.getShopSelections();
      }
    },
    async getShopSelections() {
      let res = await getShopSelections({ deptId: this.deptId });
      if (res.code == 0) {
        console.log(res);
        this.shopList = res.data;
      }
    },
    cancel() {
      this.$emit("listenModal");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.loading = true;

          let devIds = this.deviceList
            .map(item => {
              return item.devId;
            })
            .join(",");

          let params = {
            deptId: this.deptId,
            shopId: this.bindForm.shopId,
            devIds: devIds
          };

          try {
            let result = await bindShop(params);

            if (result.code == 0) {
              this.$Message.success("绑定成功!");
              this.$emit("listenModal");
              this.$emit("refreshTableList");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (e) {
            this.$Message.error("服务器异常，稍后再试");
          }
          this.loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.split {
  border: 1px solid #dcdee2;
  height: 540px;
}
.split-pane-left {
  padding: 20px 10px;
  height: 100%;
}
.split-pane-right {
  padding: 20px 20px;
}
</style>

